<template>
	<view class="register">
		<div class="title" v-if="type == 0">{{ $t('账号密码注册') }}</div>
		<div class="title" v-else-if="type == 1">{{ $t('忘记密码') }}</div>
		<div class="form"><account-form ref="uForm" :formData="formData" :codeType="codeType" :rules="rules"
				@getFormData="getFormData"></account-form></div>
		<div class="btns">
			<u-button v-if="type == 0" type="primary" @click="submit(0)">{{ $t('确定') }}</u-button>
			<u-button v-else-if="type == 1" type="primary" @click="submit(1)">{{ $t('确认修改') }}</u-button>
		</div>
		<div class="protocol" v-show="type == 0">
			<u-checkbox shape="circle" v-model="checked" :disabled="false"></u-checkbox>
			<div class="text">
				{{ $t('我已同意并愿意遵守') }}
				<text @click="goPage('用户协议', '1')">《{{ $t('用户协议') }}》</text>
				、
				<text @click="goPage('隐私协议', '5')">《{{ $t('隐私协议') }}》</text>
			</div>
		</div>
	</view>
</template>
<script>
import AccountForm from '@/components/AccountForm.vue';
export default {
	name: 'registerOrchange',
	components: {
		AccountForm
	},
	onLoad(options) {
		this.type = options.type;
		this.type == '0' ? (this.codeType = 'register') : (this.codeType = 'forget');
	},
	data() {
		return {
			type: 0, // 0 账号密码注册 1 忘记密码
			codeType: '', //forget=忘记密码  register=注册
			rulesValid: false, //校验结果
			checked: false,
			formData: [
				{
					type: 'primary',
					prop: 'mobile',
					placeholder: '请输入手机号码'
				},
				{
					type: 'code',
					prop: 'code',
					placeholder: '请输入短信验证码'
				},
				{
					type: 'password',
					prop: 'loginpass',
					placeholder: '请设置登录密码'
				},
				{
					type: 'password',
					prop: 'quepass',
					placeholder: '请再次确认登录密码'
				}
			],
			// 校验
			rules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				loginpass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				quepass: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, 6);
						},
						message: '请输入正确6位验证码',
						// 触发器可以同时用blur和change
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		submit(type) {
			this.type = type;
			this.$refs.uForm.submit();
		},
		goPage(name, id) {
			this.$u.route('/pages/login/protocol', {
				name,
				id
			});
		},
		getFormData(form) {
			if (this.type == 0) {
				if (this.checked === false) {
					this.$u.toast('请勾选用户协议');
					return;
				}
				this.codeType = 'register';
				console.log(this.codeType);
				this.$u.api.register(form).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg);
						setTimeout(() => {
							this.$u.route('pages/login/index', {
								type: 0
							});
						}, 500);
					}
				});
			} else if (this.type == 1) {
				this.codeType = 'forget';
				console.log(this.codeType);
				this.$u.api.forgetPass(form).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg);
						setTimeout(() => {
							this.$u.route('pages/login/index', {
								type: 0
							});
						}, 500);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	margin-bottom: 40rpx;
	color: #232323;
	font-size: 36rpx;
	font-weight: 700;
}

.register {
	margin: 50rpx;
}

.btns {
	margin-top: 60rpx;
}

.protocol {
	padding: 10rpx;
	@include flex;
	position: fixed;
	bottom: 20rpx;
	color: #999999;

	.text {
		flex: 1;
		font-size: 24rpx;
	}

	text {
		color: #009dff;
	}
}
</style>
